<template>
	<view class="page">
		
		<!-- 视频播放 start -->
		<!-- <view class="">
			<image src="https://img3.doubanio.com/view/photo/m/public/p494395796.jpg" mode=""></image>
			
		</view> -->
		<view class="player">
			
			<!-- <video 
				id="myTrailer"
				src="http://www.iqiyi.com/v_19rrmy33ic.html?vfm=m_331_dbdy&fv=4904d94982104144a1548dd9040df241" 
				:poster="trailerInfo.poster" 
				class="movie"
				controls></video> -->
		</view>
		<!-- 视频播放 end -->
		
		<!-- 影片基本信息 start -->
		<view class="movie-info">
			<navigator :url="'../cover/cover?cover=' + trailerInfo.cover">
				<image 
					:src="trailerInfo.images.small" 
					class="cover"></image>
			</navigator>
			
			<view class="movie-desc">
				<view class="title">{{trailerInfo.title}}</view>
				<view class="basic-info">
					<text v-for="(tag,index) in trailerInfo.tags" :key="index">						{{tag}}/&nbsp;&nbsp;
					</text>
				/</view>
				<view class="basic-info">原名{{trailerInfo.aka[0]}}</view>
				<view class="basic-info">时长{{trailerInfo.durations[0]}}</view>
				<view class="basic-info">上映时间{{trailerInfo.pubdates[0]}}</view>
				
				<view class="score-block">
					
					<view class="big-score">
						<view class="score-words">综合评分：</view>
						<view class="movie-score">{{trailerInfo.rating.average}}</view>
					</view>
					
					<view class="score-stars">
						
						<uni-rate disabled="true" value="4" size="14" class="hot-rate"></uni-rate>
						
						<view class="prise-counts">
							{{trailerInfo.rating.details[3]}}  人点赞
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<!-- 影片基本信息 end -->
		
		<view class="line-wapper">
			<view class="line"></view>
		</view>
		
		<!-- 剧情介绍 start -->
		<view class="plots-block">
			<view class="plots-title">剧情介绍</view>
			<view class="plots-desc">{{trailerInfo.summary}}</view>
		</view>
		<!-- 剧情介绍 end -->
		
		<!-- 演职人员 start -->
		<view class="scroll-block">
			<view class="plots-title">演职人员</view>
			<scroll-view scroll-x class="scroll-list">
				<!-- 导演 -->
				<view class="actor-wapper" v-for="(dirItem,staffIndex) in directorArray" :key="staffIndex">
					<image 
						:src="dirItem.avatars.small"
						class="single-actor"
						mode="aspectFill"
						@click="lookStaffs"
						:data-staffIndex="staffIndex"
					></image>
					<view class="actor-name">{{dirItem.name}}</view>
					<view class="actor-role">{{dirItem.name_en}}</view>
				</view>
				
				<!-- 演员 -->
				<view class="actor-wapper" v-for="(actor,actorIndex) in actorArray" :key="actorIndex">
					<image 
						:src="actor.avatars.small"
						class="single-actor"
						mode="aspectFill"
						@click="lookStaffs"
						:data-staffIndex="actorIndex + directorArray.length"
					></image>
					<view class="actor-name">{{actor.name}}</view>
					<view class="actor-role">{{actor.name_en}}</view>
				</view>
			</scroll-view>
		</view>
		<!-- 演职人员 end -->
		
		<!-- 剧照 start -->
		<view class="scroll-block">
			<view class="plots-title">剧照</view>
			<scroll-view scroll-x class="scroll-list">
				<image 
					v-for="(img, imgIndex) in plotPicsArray"
					:key="imgIndex"
					:src="img"
					class="plot-image"
					mode="aspectFill"
					@click="lookMe"
					:data-imgIndex="imgIndex"
				></image>
			</scroll-view>
		</view>
		<!-- 剧照 end -->
		
	</view>
</template>

<script>
	import uniRate from "@/components/uni-rate/uni-rate.vue";
	export default {
		data() {
			return {
				trailerInfo: {},
				plotPicsArray: [],	// 剧照
				directorArray: [],	// 导演列表
				actorArray: []		// 演员列表
			};
		},
		// 页面初次渲染完成，获得视频上下文对象
		onReady() {
			this.videoContext = uni.createVideoContext('myTrailer');
		},
		onHide() {
			// 页面被隐藏的时候，暂停播放
			this.videoContext.pause();
		},
		onShow() {
			// 页面被再次显示的时候，可以继续播放
// 			if (this.videoContext) {
// 				this.videoContext.play();
// 			}
		},
		onLoad(params) {
		
			// 获取上一个页面传入的参数
			var movieid = params.movieid;
			console.log(movieid);
			// 通过api修改导航栏的属性
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: "#000000"
			});
			
			// 获取预告片的详细信息
			var json_data = require('../../static/mock_json/detail.json');
			
			this.trailerInfo = json_data;
			
			this.directorArray = json_data.directors; // 导演列表
			
			this.actorArray = json_data.casts;
			
			var tmp_plotPicsArray = []; 
			json_data.photos.forEach((item,index)=>{
				tmp_plotPicsArray[index] = item.thumb
			})
			
			this.plotPicsArray = tmp_plotPicsArray;//剧照
		
			
		},
		// 此函数仅仅只支持在小程序端的分享，分享到微信群或者微信好友
		onShareAppMessage(res) {
			
		},
		// 监听导航栏的按钮
		onNavigationBarButtonTap(e) {
			
		},
		methods: {
			lookMe(e) {
				var imgIndex = e.currentTarget.dataset.imgindex;
				
				uni.previewImage({
					current: this.plotPicsArray[imgIndex],
					urls: this.plotPicsArray
				})
			},
			lookStaffs(e) {
				
				var staffIndex = e.currentTarget.dataset.staffindex;
				
				// 拼接导演和演员的数组，成为一个新数组
				var directorArray = this.directorArray;
				var actorArray = this.actorArray;
				
				var newStaffArray = [];
				newStaffArray = newStaffArray.concat(directorArray).concat(actorArray);
				
				var urls = [];
				for (var i = 0; i < newStaffArray.length ; i ++) {
					var tempPhoto = newStaffArray[i].avatars.small;
					urls.push(tempPhoto);
				}
				
				uni.previewImage({
					current: urls[staffIndex],
					urls: urls
				})
			}
		},
		
		components: {
			uniRate
		}
	}
</script>

<style>
	@import url("detail.css");
</style>
